<template>
  <div>
    <el-container>
      <el-header style="height: 200px; margin-top: -60px;">
        <div>
          <indexTop v-bind:name="routerMsg.name"></indexTop>
        </div>
      </el-header>
      <el-main class="main-div">
        <div class="main-div-1">
          <img src="../../assets/login-icon.jpg">
        </div>
        <div class="main-div-2">
          <div class="main-div-h3">
            <h3>请您填写登录信息</h3>
          </div>
          <div class="main-div-form">
            <el-form :model="loginForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

              <!--学生、评审人员角色-->
              <el-form-item v-if="roleShow" label="手机号" prop="phone">
                <el-input v-model="loginForm.phone"></el-input>
              </el-form-item>
              <!--管理员角色-->
              <el-form-item v-if="!roleShow" label="用户名" prop="name">
                <el-input v-model="loginForm.name"></el-input>
              </el-form-item>

              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginForm.password"></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <el-input style="width: 250px; float: left;" v-model="loginForm.code"></el-input>
                <img src="http://localhost:8888/getImg" @click="transformImg" id="imgCode" style="width: 150px; height: 40px; float: left;">
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <router-link :to="{ path: '/register',query: {id: newID, name: newName}}">
                  <el-button v-if="roleShow" type="success">前往注册</el-button>
                </router-link>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-main>
      <el-footer style="height: 200px;">
        <div>
          <Bottom></Bottom>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import indexTop from "@/components/indexTop"
import Bottom from "@/components/bottom"

export default {
  name: "login",
  components: {
    indexTop,
    Bottom
  },
  data() {
    return {
      roleShow: true,
      imgData: '',
      routerMsg: {
        id: '',
        name: ''
      },
      newID: '',
      newName: '',
      loginForm: {
        phone: '',
        name: '',
        password: '',
        code: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为 11 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '长度为 4 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getMsg()
    this.transformImg()
  },
  methods: {
    // 获取路由信息
    getMsg() {
      this.routerMsg = this.$route.query
      if (this.routerMsg.id == '1'){
        this.newID = '0'
        this.newName = '学生注册平台'
      } else if (this.routerMsg.id == '3'){
        this.newID = '2'
        this.newName = '评审人员注册平台'
      }else if (this.routerMsg.id == '5'){
        this.roleShow = false
      }
    },
    // 变化验证码
    transformImg(){
      document.getElementById("imgCode").src="http://localhost:8888/getImg";
    },
    // 各角色登录
    roleLogin(id){
      var url = ''
      if (id == '1'){
        // 学生角色
        url = 'student-login'
      }else if (id == '3'){
        // 评审人员角色
        url = 'assessor-login'
      }else if (id == '5'){
        // 管理员角色
        url = 'admin-login'
      }
      this.$axios.post('http://localhost:8888/' + url, this.loginForm).then(res => {
        console.log(res);
        if (res.data.code == 0){
          this.$message({
            message: '恭喜你，登录成功',
            type: 'success'
          });
          // 进行登录成功跳转及相应角色路由动态渲染
          if(id=="3"){
            localStorage.setItem('student_id',res.data.data.id)
            this.$router.push({path:'/assessor-home',query: {id:res.data.data.id}})
          }
          if(id=="1"){
            localStorage.setItem('student_id',res.data.data.id)
            this.$router.push({path:'/stu_home',query: {id:res.data.data.id}})
          }
          if(id=="5"){
            this.$router.push({path:'/ad-home'})
          }


        } else if (res.data.code == -1 && res.data.msg == '密码错误'){
          this.transformImg()
          this.$message.error('错了哦，' + res.data.msg)
          this.loginForm.password = ''
          this.loginForm.code = ''
        }else if(res.data.code == -1 && res.data.msg == '无此用户'){
          this.transformImg()
          this.$message.error('错了哦，' + res.data.msg)
          this.loginForm.phone = ''
          this.loginForm.password = ''
          this.loginForm.code = ''
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 立即登录按钮事件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.checkCodeImg()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置按钮事件
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 校验图片验证码
    checkCodeImg(){
      this.$axios.get('http://localhost:8888/check-code?code=' + this.loginForm.code).then(res => {
        if (res.data.code == 0){
          this.roleLogin(this.routerMsg.id)
        } else {
          this.$message.error('错了哦，' + res.data.msg)
          this.loginForm.code = ''
          this.transformImg()
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    }
  }

}
</script>

<style scoped>
.main-div-h3{
  position: relative;
  top: 0;
  left: 0;
  height: 100px;
  width: 700px;
}
.main-div-h3 h3{
  position: relative;
  top: -35px;
  left: -180px;
}
.main-div-form{
  position: relative;
  top: -25px;
  left: 90px;
  width: 500px;
}
.main-div-1 {
  position: absolute;
  top: 187px;
  left: 50px;
  width: 710px;
  height: 400px;
  margin-right: 35px;
}

.main-div-2 {
  position: absolute;
  top: 187px;
  left: 735px;
  width: 700px;
  height: 360px;
  background-color: #ffffff;
}
img{
  width: 90%;
  height: 90%;
}

.main-div {
  margin-left: 50px;
  margin-right: 50px;
  margin-top: -50px;
  margin-bottom: 30px;
  height: 420px;
  background: #2980b9;
  background: -webkit-linear-gradient(to right, rgb(41, 128, 185), rgb(109, 213, 250), rgb(255, 255, 255));
  background: linear-gradient(to right, rgb(41, 128, 185), rgb(109, 213, 250), rgb(255, 255, 255));
}

.el-header, .el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
